<style>
  .content {
      padding: 20px;
  }
  .app-comment-detail{
      width: 98%;
      overflow: hidden;
  }
  .app-comment-detail .list-item{
       display: flex;
       height: auto;
   }
   .app-comment-detail .head {
       border-bottom: 1px solid #eee;
   }
   .list-item-media {
       width:80px;
       line-height: 60px;
       text-align: center;
   }
   .list-item-wrap >div {
       line-height: 22px;
   }
    .list-item-inner {
       display: flex;
       display: -webkit-flex;
   }
   .list-item-inner .list-item-text {
        -webkit-flex: 1;
          flex: 1;
          height: 40px;
          line-height: 40px;
   }
 .score {
     position: absolute;
     top:0 ;
     left: 130px;
 }
 .wrap-score {
     position: relative;
 }
 .big-score span{
     font-size:50px;
     color:#08b14d;
 }
 .comment>div{
     margin-bottom: 30px;
 }
 .comment >div >span{
     display: inline-block;
     border:1px solid #ccc;
     text-align: center;
     padding: 5px 15px;
     width: 108px;

 }
.list-item-wrap-text >div {
      padding-top: 10px;
   }
.list-item-wrap-text >div >span {
        margin-right: 6px;
    }
 .all-comment span {
     margin-right: 12px;
     font-size: 14px;
     color: #303133;
 }   
 .small-score .el-rate__icon{
     font-size: 12px;
 }
 .small-score-item{
     position: relative;
 }
 .small-score-item .cube {
     display: inline-block;
     height: 6px;
     width: 50px;
     background: #999;
     border-radius: 1px;

 }
 .small-score-item .count {
     position: absolute;
     top:-2px;
     left: 100px;
 }
 .content .title {
     font-size: 20px;
     color: #303133;
     height: 40px;
     font-weight: normal;

 }
 .app-name {
     font-size: 22px;
     color: #000;
 }
 .section-four .list-item {
     border-top: 1px solid #eee;
 }
 .section-four .list-item-media{
     position: relative;
 }
 .section-four .level{
     position: absolute;
     background:#efa908;
     color: #fff;
     line-height: 12px;
     padding: 1px 5px;
     top:2px;
     right: 6px;

 }
 .section-four .list-item-wrap-text {
     padding-left: 10px;
 }
</style>

<template>
    <section class="app-comment-detail">
        <div class="head">    
				<Row>
					<!--工具条-->
					<el-col :span="24" class="toolbar" id="serachId">
						<el-form :inline="true" :model="filters">
							<el-button plain @click="returns" style="float:left;" type="text" icon="el-icon-arrow-left">返回</el-button>
							
						</el-form>
					</el-col>
				</Row>	
            </div>
         <div class="content">  
        <ul>
            <li class="list-item">
               <div class="list-item-media" style="width:130px;line-height:130px" ><img src="../../images/OA.png" alt=""></div> 
               <div class="list-item-wrap" style="flex:2">
                  <div class="app-name">{{message}}</div>
                  <div>版本：<span style="color:#000">0.0.0.2</span></div>  
                  <div>大小：<span style="color:#000">51.5MB</span></div>
                  <div>所属市场：湖南省应用市场</div>
                  <div>更新：2018-06-01</div>
               </div>
               <div style="flex:1" class="wrap-score">
                    <el-rate
                            v-model="value5"
                          
                            :colors="['#08b14d','#08b14d','#08b14d']"                                       
                            text-color="green"
                            score-template="{value}">
                    </el-rate> 
                    <div class="score">
                        7.8分
                        </div>
                </div>             
            </li>
        </ul>
        <div class="section-two">
             <div class="title">
                 应用介绍：
             </div>
             <div style="padding-left: 50px">
                  通过OA办公系统实现多人、多部门、跨地域的协同办公模式，使日常许多通过手工完成的事情，被计算机和网络提供的功能所代替，基于移动oa的随时、随地办公则进一步提升了OA的应用效果
                </div>
        </div>
        <div class="section-three">
            <ul>
            <li class="list-item">
                <div style="flex:3">
                    <div class="title">应用评分</div>
                  <div style="display:flex"> 
                    <div style="flex:1">
                        <div  class="big-score">
                            <span>7.8</span>分
                            </div>
                        <div>
                         <el-rate
                            v-model="value5"                         
                            :colors="['#08b14d','#08b14d','#08b14d']"
                                            
                            text-color="green"
                            score-template="{value}">
                          </el-rate> 
                        </div>
                        <div>5122 人已评分</div>
                    </div>
                    <div style="flex:2" class="small-score">
                        <div class="small-score-item"> 
                            <el-rate
                                v-model="value5"                         
                                :colors="['#999','#999','#999']"
                                            
                                text-color="green"
                                score-template="{value}">
                            </el-rate>
                            <div class="count">
                                <span class="cube" v-bind:style="{width:'50px' }"></span>
                                <span>45%</span>
                            </div> 
                        </div>
                        <div class="small-score-item"> 
                            <el-rate
                                v-model="value5"                         
                                :colors="['#999','#999','#999']"
                                            
                                text-color="green"
                                score-template="{value}">
                            </el-rate>
                            <div class="count">
                                <span class="cube" v-bind:style="{width:'27px' }"></span>
                                <span>27%</span>
                            </div> 
                        </div>
                        <div class="small-score-item"> 
                            <el-rate
                                v-model="value5"                         
                                :colors="['#999','#999','#999']"
                                            
                                text-color="green"
                                score-template="{value}">
                            </el-rate>
                            <div class="count">
                                <span class="cube" v-bind:style="{width:'9px' }"></span>
                                <span>9%</span>
                            </div> 
                        </div> 
                        <div class="small-score-item"> 
                            <el-rate
                                v-model="value5"                         
                                :colors="['#999','#999','#999']"
                                            
                                text-color="green"
                                score-template="{value}">
                            </el-rate>
                            <div class="count">
                                <span class="cube" v-bind:style="{width:'9px' }"></span>
                                <span>9%</span>
                            </div> 
                        </div>
                        <div class="small-score-item"> 
                            <el-rate
                                v-model="value5"                         
                                :colors="['#999','#999','#999']"
                                            
                                text-color="green"
                                score-template="{value}">
                            </el-rate>
                            <div class="count">
                                <span class="cube" v-bind:style="{width:'9px' }"></span>
                                <span>9%</span>
                            </div> 
                        </div> 
                    </div>
                  </div> 
                </div>
                <div style="flex:1"></div>
                <div style="flex:2">
                    <div class="title" style="padding-left:80px">大家印象</div>
                    <div style="display:flex">
                       <div style="flex:1" class="comment">
                           <div><span>很好(100)</span> </div>                         
                           <div><span> 实用(100)</span> </div>                  
                           <div><span>界面清爽(100)</span> </div>
                              
                        </div> 
                       <div style="flex:1" class="comment">
                           <div><span> 一般(100)</span></div>                        
                           <div><span> 内容广(100)</span></div>                    
                           <div><span>操作简单(100)</span></div>
                               
                       </div>
                    </div>
                </div>
                 
            </li>
        </ul>
        </div>
        <div class="section-four">
            <div class="title">评论</div>
            <div class="all-comment"><span style="color:#61aaf4">全部(1000)</span><span>好评(200)</span><span>中评(500)</span><span>差评(300)</span></div>
            <div>
            <ul>
            <li class="list-item">
               <div class="list-item-media"><img src="../../images/app_user.png" alt="" style="margin-top: 10px;"> <div class="level">Lv1</div></div> 
               <div style="width:100%" class="list-item-wrap-text">
                  <div >
                    <span>3026652266</span><span>广告多</span> <span>网页打开慢</span> <span>垃圾</span>
                  </div>
                  <div>2018-05-06 13:03:02</div>  
               </div>
            </li>
            <li class="list-item">
               <div class="list-item-media"><img src="../../images/app_user.png" alt="" style="margin-top: 10px;"> <div class="level">Lv1</div></div> 
               <div style="width:100%" class="list-item-wrap-text">
                  <div >
                    <span>3026652266</span><span>广告多</span> <span>网页打开慢</span> <span>垃圾</span>
                  </div>
                  <div>2018-05-06 13:03:02</div>  
               </div>
            </li>
            <li class="list-item">
               <div class="list-item-media"><img src="../../images/app_user.png" alt="" style="margin-top: 10px;"> <div class="level">Lv1</div></div> 
               <div style="width:100%" class="list-item-wrap-text">
                  <div >
                    <span>3026652266</span><span>广告多</span> <span>网页打开慢</span> <span>垃圾</span>
                  </div>
                  <div>2018-05-06 13:03:02</div>  
               </div>
            </li>
        </ul>
            </div>
        </div>
     </div> 
    </section>
    
</template>
<script>
//:disabled="this.fileUrl==='0'"
	import utils from '../api/utils'
	import  checks  from '../api/checks'
	//import NProgress from 'nprogress'
	import { getApplicationTypeList,addApplicationType,editApplicationType,deleteApplicationType,getMarketList } from '../api/api';

	export default {
        props: {
            message: String
        },
		data() {
			return {
				filters: {
					className: ''
				},
				tableData: [],
				total: 0,
				pageNum: 1,
				pageSize:10,
				listLoading: false,
				sels: [],//列表选中列
				market:[],//所有市场
				superClassList:[],//所有分类

				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				editFormRules: {
					className: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},
		

				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				addFormRules: {
					className: [
						{ required: true, message: '请输入分类名称', trigger: 'blur' }
					]
				},
	
				defaultProps: {
					label: 'marketName',
					isLeaf: 'leaf',
				},
				fileList: [],
				paramData:{sys:1,module:3,keyId:""},
				fileUrl:'',

				addOrEdit:0,
                uploadUrl:'',
                value5: 3.7,
                starWidth: 80,
			}
		},
		methods: {
            returns() {// 返回上一级
                this.$emit('backToBase', this.appObj); //主动触发upup方法，'vary'为向父组件传递的数据
            },
			formatIsShow: function (row, column) {
				return row.isShow == 1 ? '是' : row.isShow == 0 ? '否' : '未知';
			},
			formatCreateDate: function (row, column) {
				return row.createDate = (!row.createDate || row.createDate == '') ? '' : checks.formatDate(new Date(row.createDate), 'yyyy-MM-dd hh:mm:ss');
			},
			formatUpdateDate: function (row, column) {
				return row.updateDate = (!row.updateDate || row.updateDate == '') ? '' : checks.formatDate(new Date(row.updateDate), 'yyyy-MM-dd hh:mm:ss');
			},
			handleCurrentPageChange: function (pageNum) {// 翻页动作
                this.pageNum = pageNum;
                this.getList();// 翻页后刷新页面数据
			},
			inputChange: function (name,id,form) {
				checks.checkNum(name,id,form,0,this);
			},
			//获取列表
			getList() {
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					className: this.filters.className,
					// marketCodeList:this.$refs.tree.getCheckedKeys()
				};
				this.listLoading = true;
				//NProgress.start();
				getApplicationTypeList(params).then(function(result){
               let obj={classCode:"1",
                        className:"广东省应用市场",
                        createDate:1525783907000,
                        creater:null,
                        isShow:"巡逻签到",
                        logo:"",
                        marketCode:"",
                        marketName:"Android",
                        remark:"",
                        sort:"V0.0.1",
                        superClass:"",
                        superClassName:null,
                        updateDate:1527850874000,
                        userName:"张三",
                        download:"广州市公安局",
                        phoneType:"xiaomi",
                        phoneImel:'85855165',
                        phoneNumber:'13751332669',
                        token:'123212111',
                        safeCard:'295665663',
                        request:'bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo',
                        response:'bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo'

                         };
					this.tableData = result.data.list.map(item=> Object.assign({},item,obj)  );
                         
                   
					this.pageNum = result.data.pageNum;
					this.pageSize = result.data.pageSize;
					this.total = result.data.total;
					this.listLoading = false;
				}.bind(this)).catch(function (error) {
					this.listLoading = false;
					console.log(error);
				}.bind(this));
			},	
			//显示编辑界面
			ApplicationTypeEdit: function (index, row) {
	
			},
			//显示新增界面
			ApplicationType: function () {
		
			},
	
			selsChange: function (sels) {
				this.sels = sels;
			},

			toGetList:function(){
				this.getList();
			},
		
         
      
		},
		mounted() {
			this.getList();
			this.uploadUrl = utils.uploadUrl(); //设置图片上传地址
		},
		created(){
		}
	}

</script>

